본문으로 건너뛰기

<Fragment>

🧑🏻‍💻 Fragment​

<Fragment> 는 감싸는 노드 없이도 엘리먼트를 그룹화할 수 있게 해준다.

✅ Fragment 문법​

<>
  <OneChild />
  <AnotherChild />
</>
  • 빈 JSX 태그 <></>는 대부분의 <Fragment>의 축약 표현이다.

🧑🏻‍💻 알고 가기​

✅ 언제 사용하는 지​

  • 엘리먼트들을 그룹화하여 단일 엘리먼트로 사용할 때
  • 엘리먼트들을 감쌀 시 레이아웃이나 스타일에 영항을 주지 않으려고 할 때

✅ 주요 특징​

  • <Fragment>로 엘리먼트들을 그룹화하더라도 실제 DOM에는 아무런 영향을 주지 않는다.
  • 텍스트와 컴포넌트들을 함께 그룹화할 수 있다.

✅ 주의 사항​

  • key를 전달하려고 하는 경우 명시적으로 <Fragment>를 불러와야 한다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ Fragment의 props인 key는 주로 언제 사용할까?​

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}
  • 반복문에서 여러 엘리먼트를 렌더링하는 경우 각 엘리먼트에 key를 할당해야 한다.